Like any kind of apps, JavaScript apps also have to be written well.
Otherwise, we run into all kinds of issues later on.
In this article, we’ll look at some tips we should follow to write JavaScript code faster and better.
Looping Over Arrays
JavaScript provides many array methods that we can use to work with arrays in a concise manner.
while Loop
We can use the while loop to loop through arrays.
For instance, we can write:
let index = 0;
const arr = [1,2,3];
while (index < arr.length) {
console.log(arr[index]);
index++;
}
We update the index at each iterator to access the objects in arr .
Classical for Loop
There’s also the classical for loop for iterating overt items in an array.
It works by setting up the initial condition, the ending condition, and the array index update statement on the first line of the loo.
For instance, we write:
const arr = [1,2,3];
for (let index = 0; index < arr.length; index++) {
console.log(arr[index]);
}
forEach
We can use the forEach method to loop through array entries.
It takes a callback that we can run code on each entry.
For instance, we can write:
const arr = [1,2,3];
arr.forEach((val, index, array) => {
console.log(index, array, val);
});
We have arr which we called forEach on.
Then we get the array entry with val , the index of the entry with index , and the array itself with array .
map
map lets us map our array entries from one to the other.
For instance, we can write:
const arr = [1,2,3];
const cube = x => x ** 3;
const cubes = arr.map(cube);
We have the cube function which we pass in as the callback for the map function.
x has the array entry’s value.
cubes has the new array with each entry of arr cubed.
reduce
The reduce method lets is combine the entries into a single value.
For instance, we can write:
const arr = [1,2,3];
const sum = (total, y) => total + y;
const sum = arr.reduce(sum, 0);
We have arr which we called reduce on by passing in the sum function as its callback.
The first parameter is the accumulate total so far and the second is the entry being added into the total .
The 2nd argument of reduce is the initial value.
The combination of the entries is done from left to right.
There’s also a reduceRight method that combines entries from right to left.
filter
The filter method returns an array that meets the condition in the callback.
For instance, we can write:
const arr = [1,2,3];
const isEven = x => x % 2 === 0;
const evenArr = arr.filter(isEven);
We have isEven , which is a function that checks if an array entry x is evenly divisible by 2.
We call filter on arr with isEven passed in.
Then evenArr should have all the even entries in arr .
every
The every method checks if every entry in the array meet some given condition.
For instance, we can write:
const arr = [1,2,3];
const under10 = x => x < 10;
const allUnder10 = arr.every(under10);
We have under10 , which checks if every entry is under 10.
x is the array entry.
Then we called every with under10 as the callback.
allUnder10 should be true since all entries in arr are less than 10.
some
some checks if one or more elements in the array match the given condition.
For instance, we can write:
const arr = [1,2,3];
const under10 = x => x < 10;
const someUnder10 = arr.some(under10);
Then someUnder10 should be true since there’s at least one entry in arr that’s less than 10.
Closures
We can create an enclosed scope in loops by running:
for (let i = 0; i < 3; i++) {
funcs[i] = ((value) => {
console.log(value);
})(i);
}
This way, we get the value of the index variable looped when we called the function in funcs .
Conclusion
We can use array methods to save us the effort of looping through entries and doing what we want.
Also, we should wrap our code in IIFEs to create a closure with the index variable value of a loop.
